<template>
  <el-row>
    <el-col :span="20" :offset="2">
      <el-card>
        <el-row class="sort_main">
          <el-col :span="3" :offset="1"><h1>分类</h1></el-col>
          <el-col :span="4" :offset="16" class="sort_totle"
            >共<span class="totle"> {{ sortNum }} </span>种</el-col
          >
        </el-row>
        <!-- :autofocus="id == sort.id ? 'true' : 'false'"  -->
        <div class="sort_sorts">
          <el-button
            plain
            v-for="(sort, index) in sorts"
            :key="index"
            @click="getBlogBySid(sort.id, 1)"
            >{{ sort.name + " | " + sort.blogNum }}</el-button
          >
        </div>
      </el-card>
    </el-col>
    <el-col :span="20" :offset="2">
      <el-card>
        <el-row>
          <el-col
            :span="20"
            :offset="2"
            class="blogs"
            v-for="(item, index) in blogs"
            :key="index"
          >
            <!-- 博客标题 -->
            <div class="blog_title" @click="toDetail(item.id)">
              {{ item.title }}
            </div>
            <!-- 博客简介 -->
            <div class="blog_content">
               {{ item.intro }}
              <el-image :src="item.imageUrl" fit="scale-down"></el-image>
            </div>
            <!-- 博客信息 -->
            <div class="blog_user">
              <el-row>
                <el-col :span="5">
                  <el-avatar :src="item.user.iconUrl"></el-avatar>
                  <span class="blog_info blog_username">{{
                    item.user.nickName
                  }}</span>
                </el-col>
                <el-col :span="6">
                  <span class="blog_info">{{ item.createTime }}</span>
                </el-col>
                <el-col :span="3" :offset="9">
                  <span class="blog_info"
                    ><i class="el-icon-view"></i>{{ " " + item.totle }}</span
                  >
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <div>
          <el-pagination
            layout="prev, pager, next"
            :page-size="7"
            :total="pageInfo.totle"
            @current-change="handleCurrentPage"
          >
          </el-pagination>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      pageInfo: {},
      sortNum: 0,
      sorts: [],
      blogs: [],
    };
  },
  methods: {
    async getAllSorts() {
      var d = await this.$http.get("sorts");
      console.log(d.data.sorts);
      this.sorts = d.data.sorts;
      this.sortNum = d.data.sortNum;
    },
    toDetail(id) {
      this.$http.put("/blogTotle/" + id);
      this.$router.push("/h_detail/" + id);
    },
    async getBlogBySid(id, currentPage) {
      this.id = id;
      var d = await this.$http.get("sblogs/" + id + "/" + currentPage);
      this.blogs = d.data.blogs;
      this.pageInfo = d.data.pageInfo;
    },
    handleCurrentPage(page) {
      this.getBlogBySid(this.id, page);
    },
  },
  mounted: function () {
    var d = this.id;
    this.getAllSorts();
    this.getBlogBySid(d, 1);
  },
};
</script>
<style scoped>
.sort_main {
  border-bottom: 1px solid #b8c0cc;
  margin-bottom: 50px;
}
.sort_totle {
  line-height: 32px;
  font-size: 1.2em;
}
.totle {
  font-size: 1.5em;
  color: red;
}
.sort_sorts {
  width: 80%;
  margin: 0 auto;
}
.blog_title {
  font-size: 1.2em;
  font-weight: 550;
  margin-bottom: 5px;
  cursor: pointer;
}
.blogs {
  margin-bottom: 25px;
  border-bottom: 1px solid #b8c0cc;
}
.blog_content {
  height: 100px;
  margin-bottom: 20px;
  line-height: 35px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.el-image {
  margin-left: 15px;
  width: 150px;
  height: 100px;
  float: right;
}
.blog_user {
  margin-bottom: 10px;
}
.blog_info {
  line-height: 40px;
  color: #b8c0cc;
}
.el-button {
  margin: 10px 10px;
}
</style>